import React, { FC, useState } from "react";
import { Five,Camera } from "@realsee/five";
import { useFiveCurrentState, useFiveEventCallback, useFiveSceneEffect } from "@realsee/five/react";
import * as THREE from 'three'

import "./control.css"

let initWall = ()=>{
  
}
 


let createLabel = (message:string, position:any)=>{
  /* 创建画布 */
  var canvas = document.createElement('canvas');
  var ctx=canvas.getContext('2d');

  if(ctx!=null){
    ctx.font="30px Arial";
    ctx.fillStyle = "#ffffff"
    ctx.fillText(message, 100,100);
  }
  
   //定义第一个标签
   var texture = new THREE.CanvasTexture(canvas);
   
  //  var spriteMap1 = new THREE.TextureLoader().load( "/static/1-1.svg" );
   var spriteMaterial1 = new THREE.SpriteMaterial( { map: texture, color: 0xffffff } );
   var sprite1 = new THREE.Sprite( spriteMaterial1 );
   
   sprite1.position.set(position.x,position.y,position.z);
   sprite1.scale.set(2,1,1);
   return sprite1
}
const Control: FC<{}> = (props) => {

  const [active, setActive] = useState<string>("moxing")
  const [state, setState] = useFiveCurrentState();
  const handleClick = (key: string) => {
    setActive(key)
    if (key === 'moxing') {
      setState({ mode: Five.Mode.Panorama })
    } else if (key === 'sanwei') {
      setState({ mode: Five.Mode.Floorplan })
    } else if (key === 'huxingtu') {
      setState({ mode: Five.Mode.Topview })
    }
  }

  useFiveEventCallback('textureLoaded', (res) => {
    console.log("123", res)
  })

  useFiveSceneEffect((scene) => {
    const loadWork = (url: string) => {
      fetch(url).then((res) => {
        res.json().then(data => {
          console.log(data)
          let roomInfo = data.minimap.roomLabels
          let bounding = data.minimap.bounding
          let origin = bounding.origin;
          let roomObservers = data.roomObservers
          let work = data.work
          for(let key in roomInfo[0]) {
            let label = roomInfo[0][key]
            let name = label.name
            let roomPointsY:any = [];
            roomObservers.forEach(function (roomObserver:any, index:any) {
              if (!roomObserver) return;
              if (roomObserver.name === name) roomPointsY.push(work.observers[index].position[1]);
            });
            if (roomPointsY.length === 0) return;
            var y = roomPointsY.reduce(function (p:any, n:any) {
              return p + n;
            }) / roomPointsY.length;

            let vector = new THREE.Vector3((label.x - origin.x) / 1000, y, -(label.y - origin.y) / 1000);
            scene.add(createLabel(name,vector))
          }




          var getDistance = function getDistance(p1:any, p2:any) {
            return Math.sqrt(Math.pow(p1.z - p2.z, 2) + Math.pow(p1.x - p2.x, 2));
          };
          var centerPoint = function centerPoint(p1:any, p2:any) {
            return { x: (p1.x + p2.x) / 2, z: (p1.z + p2.z) / 2 };
          };
          var getVector3 = function getVector3(p1:any, p2:any) {
            return new THREE.Vector3(p2.x - p1.x, 0, p2.z - p1.z);
          };
          var geometry = new THREE.PlaneGeometry( 5, 5, 5 );
          geometry.rotateY(Math.PI);
          var material = new THREE.MeshBasicMaterial( {
            color: 0x12FFFB,
            side: THREE.DoubleSide,
            depthTest: false,
            opacity: .05,
            transparent: true
          } );
          var plane = new THREE.Mesh( geometry, material );
          scene.add( plane );

         
        })
      })
    }
    loadWork('/static/work2.json')

    
  })

  return (
    <div>
      <div className="control">
        <div className={active === 'moxing' ? 'btn btn-active' : 'btn'} onClick={() => { handleClick('moxing') }}>
          漫游
        </div>
        <div className={active === 'sanwei' ? 'btn btn-active' : 'btn'} onClick={() => { handleClick('sanwei') }}>
          三维模型
        </div>
        <div className={active === 'huxingtu' ? 'btn btn-active' : 'btn'} onClick={() => { handleClick('huxingtu') }}>
          户型图
        </div>
      </div>
    </div>
  );
}
export default Control;